<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style>
  @media screen and (max-width:320px){
	  body{font-size:12px;
	  color:red;
	  }
	  
	  } 
 @media screen and (min-width:321px) and (max-width:760px){
	  body{
		  font-size:16px;
		  color:black;
		  
		  }
	 
	 }
 @media screen and (min-width:761px){
	 body{
		 font-size:30px;
		 color:green;
		 }
	 }
  body{width:100%;height:100%;margin:0;padding:0;}
 /* p:after{
	  content:"wolaile";
	  
	 }
*/
p{text-indent:2em;}	 
  body div{border:1px solid #b5b5b5;}
</style>
</head>
  
<body>
<!--是否根据屏幕自动换行 开始-->
     <p class="text-nowrap" > text-nowrap这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码</p>
     <p class="text-justify"> text-justify这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码</p>
     <p class="text-nowrap" > 无样式 这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码这是一段测试代码</p>
<!--是否根据屏幕自动换行 结束-->
  <div class="container">
     <div class="row">
       <div class="col-xs-4 col-sm-6 col-md-2">11</div>
       <div class="col-xs-4 col-sm-4 col-md-4">12</div>
       <div class="col-xs-4 col-sm-2 col-md-6">13</div>
     </div>
     <div class="row">
        <div class="col-xs-6">21</div>
        <div class="col-xs-6">22</div>
     </div>
 </div>
 <div class="container">
    <div class="row" >
        <div class="col-xs-6 col-sm-3"   style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3"  style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
               enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. 
            </p>
        </div>
 
        <div class="clearfix visible-xs"></div>
 
        <div class="col-xs-6 col-sm-3"  style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
              laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
               enim ad minim 
            </p>
        </div>
    </div>
</div>
<!--偏移 begin-->
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-offset-3  col-md-offset-3" 
        style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing  elit. </p>
        </div>
    </div>
</div>
<!--偏移 the end-->
<!--嵌套 列 开始-->
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-md-3 " style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
        <div class="col-md-9 " style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分为四个盒子</h4>
            <div class="row">
                <div class="col-md-6 col-xs-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6 col-xs-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                         sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-xs-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6 col-xs-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--嵌套 列 结束-->
<!--bootstrap 布局 开始-->

<!---->
</body>
</html>
